<template>
  <Popup
      :round="round"
      v-model="visible"
      :overlay="true"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      @click-overlay="handleClose"
      :safe-area-inset-bottom="true"
      :close-on-click-overlay="false"

  >
    <div class="report-dept">
      <div class="header-area">
        <i class="el-icon-back" @click="handlePre" v-if="step===3"/>
        <span>{{ headInfo }}</span>
      </div>
      <div class="content-wrap">
        <el-row :gutter="30" class="content-area-inside" :style="getStyle('inside')">

          <template v-if="step===1">
            <template v-for="item in info.signList">
              <el-col :span="12" data-dept="患者号别">
                <div class="item" @click="handlePatientRegInfo(item)">
                  {{ item.registerObjName }}
                </div>
              </el-col>
            </template>
          </template>

          <template v-if="step===2">
            <template v-if="!!(info?.deptList?.length)">
              <template v-for="item in info.deptList">
                <el-col :span="12" data-dept="设备科室">
                  <div class="item" @click="handleDeptInfo(item)">
                    {{ item.deptName }}
                  </div>
                </el-col>
              </template>
            </template>
            <template v-else>
              <el-empty description="暂无数据"></el-empty>
            </template>
          </template>

          <template v-if="step===3">
            <template v-if="!!(deptRegOption?.length)">
              <template v-for="item in deptRegOption">
                <el-col :span="12" data-dept="设备科室">
                  <div class="item" @click="handleDeptRegInfo(item)">
                    {{ item.registerObjName }}
                  </div>
                </el-col>
              </template>
            </template>
            <template v-else>
              <el-empty description="暂无数据"></el-empty>
            </template>
          </template>

        </el-row>
      </div>
      <div class="footer-area">
        <div class="patient-info">您好,{{ firstRegInfo.patientName }}</div>
        <div class="countdown" @click="handleClose(false)">
          退出&nbsp;{{ `${time / 1000}` }}s
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Button, Divider, Popup, Sidebar, SidebarItem} from 'vant';
import {v4 as uuid} from "uuid";
import {pxToVw} from "@/utils/common";
export default {
  name: 'ReportDept',

  componentName: "ReportDept",

  props: {
    visible: {
      type: Boolean,
      required: false
    },
    info: {
      type: Object,
      required: true
    },
  },

  components: {
    Popup,
    Button,
    Divider,
    Sidebar,
    SidebarItem
  },

  data() {
    return {
      step: 1,
      activeKey: 0,
      round: true,
      time: 60000,
      timer: null,
      loading: false,
      patientParams: {
        patientReg: null,
        devDept: null,
        deptReg: null,
      },
      firstRegInfo: Object(),
    }
  },

  computed: {
    // 行内样式
    getStyle() {
      return function (row) {
        let obj = Object();
        switch (row) {
          case 'inside':
            let winHeight;
            // 获取窗口宽度
            if (window.innerWidth) {
              winHeight = window.innerHeight;
            } else if ((document.body) && (document.body.clientHeight)) {
              winHeight = document.body.clientHeight;
            }
            Reflect.set(obj, 'maxHeight', pxToVw(winHeight - 176 - 150 - 200))
            return obj;
        }
      }
    },

    getClassName() {
      let {state} = (this.info);
      switch (state) {
        case 0:
          return 'icon-fail';
        case 1:
          return 'icon-success';
        case 2:
          return true;
      }
    },

    shownInfo() {
      return function (state) {
        let type = parseInt(this.info.state);
        if (Reflect.has(this.info, 'state')) {
          return state.includes(type);
        } else {
          return false
        }
      }
    },

    headInfo() {
      let step = this.step;
      switch (step) {
        case 1:
          return '请选择挂号信息'
        case 2:
          return '请选择科室'
        case 3:
          return '请选择号别'

      }
    },

    // 对应科室下的号别
    deptRegOption() {
      let {devDept} = this.patientParams;
      return (devDept.registerObjWorkerList);
    },

    doctorInfo() {
      let {signList = []} = this.info;
      let headerInfo = this.$lodash.head(signList);
      return headerInfo?.patientName
    }

  },

  mounted() {
    console.log('init')
  },

  methods: {
    handleClose(statu) {
      const self = this;
      self.$emit('handleCancel')
      self.$emit('handle-cancel')
      self.loading = true;
      clearInterval(self.timer);
      if (!statu) {
        setTimeout(() => {
          self.loading = false;
        }, 1500)
      } else {
        self.loading = false;
      }
    },

    handlePatientRegInfo(row) {
      this.step = 2;
      Reflect.set(this.patientParams, 'patientReg', row);
    },

    handleDeptInfo(row) {
      this.step = 3;
      Reflect.set(this.patientParams, 'devDept', row);
    },

    handleDeptRegInfo(row) {
      let params = Object();
      Reflect.set(this.patientParams, 'deptReg', row);
      let {patientReg, deptReg} = this.patientParams;
      Reflect.set(params, 'registerId', (patientReg.registerId));
      Reflect.set(params, 'registerObjId', (deptReg.registerObjId));
      Reflect.set(params, 'registerObjName', (deptReg.registerObjName));
      this.$emit('handle-sure', params)
      this.handleClose(false);
    },

    handlePre() {
      let {signList} = this.info;
      let leng = signList?.length
      if (leng === 1) {
        if (this.step !== 2) {
          this.step = --(this.step)
        }
      } else {
        if (this.step !== 1) {
          this.step = --(this.step)
        }
      }
    }
  },

  watch: {
    visible: {
      handler: function (val) {
        const self = this;
        let {signList, time} = this.info;
        self.widgetKey = uuid();
        if (val) {
          if (!!(signList?.length)) {
            self.firstRegInfo = self.$lodash.head(signList);
          }
          if (signList?.length === 1) {
            self.step = 2;
            let rowInfo = self.$lodash.head(signList);
            Reflect.set(self.patientParams, 'patientReg', rowInfo);
          } else {
            self.step = 1;
          }
          self.time = time * 1000;
          self.timer = setInterval(() => {
            self.time = (self.time - 1000);
            if ((self.time) === 0) {
              self.handleClose(true);
              clearInterval(self.timer)
            }
            // console.log('1关闭倒计时')
          }, 1000);
        } else {
          clearInterval(self.timer);
          // self.step = 1;
        }
      },
      deep: true,
      immediate: true
    },
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
